<script setup lang="ts">
import { reactive, ref } from 'vue'
import { showNotify } from 'vant'
import { useStore } from '../store'
import { get, post, put } from '../utils/request'
import { useRoute, useRouter } from 'vue-router'
import { dayjs } from 'element-plus'
const router = useRouter()
const route = useRoute()
const form = reactive({
  memo: '',
  price: 650
})

const state = reactive({
  show: false,
  disabled: false, // 提交按钮禁用
})

const store = useStore()
const init = () => {
}
if (!store.getToken) {
  router.push('/auth?url='+encodeURIComponent(location.href))
}
else {
  init()
}

const save = () => {
  state.disabled = true
  // 检查数据
  if (!form.memo) {
    showNotify('请填写备注信息');
    state.disabled = false
    return false
  }

  // 提交
  post(
    'pay',
    form
  ).then(res => {
    alert('提交成功')
    // window.wx.closeWindow()
    // router.push('/carnival')
    location.href = 'http://pay.fortrip.cn/v2/wx_pay.php?key=ctspay&oId=' + res.data.id + '&price=' + form.price
  }).catch(err => {
    alert(err.response.data.msg)
    location.href = 'http://h5.fortrip.cn/form/#/650'
  })
  
}
document.title = "自助缴费"
</script>

<template>
  <div style="min-height: 100vh;background:#eee">

    <h2 class="van-doc-demo-block__title">个人信息</h2>
    <van-cell-group inset>
      <van-field v-model="form.price" label="金额" readonly />
      <van-field v-model="form.memo" label="备注" placeholder="请填写姓名或电话信息" />
    </van-cell-group>

    <div style="padding: 10px 20px;">
      <van-button block @click="save" :disabled="state.disabled">确定</van-button>
    </div>

  </div>

</template>

<style scoped>
.van-doc-demo-block__title {
  margin: 0;
  padding: 32px 16px 16px;
  color: var(--van-doc-text-color-4);
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}
</style>